<template>
    <div ref="test" class="canvaContainer" style="height:200px;"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    methods: {
        drawEcharts() {
            var myChart = echarts.init(this.$refs.test, 'dark');

            // 指定图表的配置项和数据
            var option = {
                backgroundColor: '#121626',
                color: ['#DE6173', '#333FFF', '#23B899'],
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '30%',
                    right: '20%',
                    orient: 'vertical'
                },
                series: [
                    {
                        name: '数据来源',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['30%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '16'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1048, name: '微博' },
                            { value: 580, name: '贴吧' }
                        ]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    },
    mounted() {
        this.drawEcharts();
    }
};
</script>

<style lang="scss" scoped>
.canvaContainer {
    box-sizing: border-box;
    width: 100%;
}
</style>
